import { AtButton, AtRadio } from "taro-ui";
import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";
import { useEffect, useState } from "react";
import "./index.scss";
import questions from "../../data/questions.json";
import GlobalFooter from "../../components/GlobalFooter";

/**
 * 答题页面
 */
export default () => {
  // 当前题目序号（从 1 开始）

  // 使用useState钩子来定义一个名为current的状态变量，并初始化为1
  // useState<number>(1) 表示current变量的类型为number，初始值为1
  // setCurrent是用于更新current状态的函数
  const [current, setCurrent] = useState<number>(1);

  // 当前题目

  // 使用useState钩子来声明一个状态变量currentQuestion，并初始化为questions数组的第一个元素
  // currentQuestion用于存储当前的问题对象
  // setCurrentQuestion是一个函数，用于更新currentQuestion的值
  const [currentQuestion, setCurrentQuestion] = useState(questions[0]);

  // 定义一个名为 radioOptions 的常量，它是一个数组
  // 该数组通过遍历 currentQuestion 对象中的 options 属性生成
  const radioOptions = currentQuestion.options.map((option) => {
    // [
    //   { label: "A. 独自工作", value: "A" },
    //   { label: "B. 与他人合作", value: "B" }
    // ]
    return {
      //  label: "A. 独自工作",  // option.key + option.value
      label: `${option.key}. ${option.value}`, // label 属性的值是一个字符串，由 option 对象的 key 属性和 value 属性拼接而成
      // value: "A"             // option.key
      value: option.key, // value 属性的值是 option 对象的 key 属性
    };
  });

  // 当前回答

  // 使用useState钩子来创建一个状态变量currentAnswer和一个用于更新该状态的函数setCurrentAnswer
  // 初始状态设置为undefined，表示当前没有答案
  const [currentAnswer, setCurrentAnswer] = useState<string>();

  // 回答列表：用于存储用户所有题目的选择（按题号顺序存储）

  // 使用 useState 钩子创建一个状态变量 answerList，并初始化为空字符串数组
  // useState 是 React 中用于在函数组件中添加状态的方法
  // <string[]> 表示 answerList 的类型是字符串数组
  const [answerList, setAnswerList] = useState<string[]>([]);

  // 序号变化时，切换当前题目和当前回答

  // 使用 useEffect 钩子来监听 current 变量的变化
  useEffect(() => {
    // 设置当前问题为问题列表中的第 current - 1 个问题
    setCurrentQuestion(questions[current - 1]);

    // 设置当前答案为 answerList 数组中索引为 current - 1 的元素
    setCurrentAnswer(answerList[current - 1]);
  }, [current, answerList]); // 这个代码片段是一个React组件的依赖数组，用于指定哪些值的变化会触发组件的重新渲染。

  return (
    <View className="doQuestionPage">
      <View className="at-article__h2 title">
        {current}、{currentQuestion.title}
      </View>
      <View className="options-wrapper">
        <AtRadio
          // [
          //   { label: "A. 独自工作", value: "A" },
          //   { label: "B. 与他人合作", value: "B" }
          // ]
          options={radioOptions}

          // 初始化时：currentAnswer 为 undefined（未选）。
          // 用户选择后：currentAnswer 更新为选项的 value（如 "A"）。
          value={currentAnswer}

          onClick={(value) => {
            // 更新当前选中状态
            setCurrentAnswer(value);
            // 保存答案到全局列表
            const updatedAnswers = [...answerList];
            updatedAnswers[current - 1] = value;
            setAnswerList(updatedAnswers);
          }}
        />
      </View>

      {current < questions.length && (
        <AtButton
          type="primary"
          size="normal"
          className="controlBtn"
          circle
          disabled={!currentAnswer}
          onClick={() => {
            setCurrent(current + 1);
          }}
        >
          下一题
        </AtButton>
      )}

      {current >= questions.length && (
        <AtButton
          type="primary"
          size="normal"
          className="controlBtn"
          circle
          disabled={!currentAnswer}
          onClick={() => {
            // 在导航到结果页面之前，确保将答案列表保存到本地存储
            Taro.setStorageSync("answerList", answerList);
            Taro.navigateTo({
              url: "/pages/result/index",
            });
          }}
        >
          查看结果
        </AtButton>
      )}

      {current > 1 && (
        <AtButton
          size="normal"
          className="controlBtn"
          circle
          onClick={() => {
            setCurrent(current - 1);
          }}
        >
          上一题
        </AtButton>
      )}
      <GlobalFooter />
    </View>
  );
};
